import React, { Component } from "react";
// import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import { BrowserRouter, Link, Route, Switch } from "../../kreactRouterDOM/index";
import HomePage from "./HomePage";
import UserPage from "./UserPage";
import SearchPage from "./SearchPage";
import HooksPage from "./HooksPage";

export default class RouterPage extends Component {
      render() {
            return (
                  <div>
                        <h1>RouterPage</h1>
                        <BrowserRouter>
                              <nav>
                                    <Link to="/">首页</Link>
                                    <Link to="/user">用户中心</Link>
                                    <Link to="/search/123">搜索</Link>
                                    <Link to="/hook/1234">Hooks测试</Link>
                                    <Link to="/product/12">商品页</Link>
                              </nav>

                              {/* 添加Switch表示仅匹配一个*/}
                              <Switch>
                                    {/* 根路由要添加exact，实现精确匹配 */}
                                    <Route
                                          exact
                                          path="/"
                                          component={HomePage}
                                    ></Route>
                                    <Route path="/user" component={UserPage} />
                                    <Route
                                          path="/search/:id"
                                          component={SearchPage}
                                    />
                                    <Route
                                          path="/hook/:id"
                                          component={HooksPage}
                                    />
                                    <Route render={() => <h1>404</h1>} />
                              </Switch>
                        </BrowserRouter>
                  </div>
            );
      }
}
